<template>
	<view class="register">
		<!-- <navbar ref="navbar" :config="config" backColor="#fff"></navbar> -->

		<form @submit="formSubmit">
			<view class="contFrom">
				<view class="item">

					<view class="top">
						注册
					</view>

					<view class="phone">

						<input type="number" @input="onPhone" v-model="phone" name="phone" placeholder="请填写手机号"
							maxlength="11" placeholder-style="color:#cccccc; font-size:28rpx;" />
						<!-- <button :loading="loading" class="obtain active" open-type="getPhoneNumber" @getphonenumber="getPhone">获取手机号</button> -->
					</view>
					<!-- <view class="verification">
						
						<input type="number" class="adjustment" v-model="code" name="code" maxlength="6"
							placeholder="请输入验证码" placeholder-style="color:#cccccc; font-size:28rpx;" />
						<button class="obtain" :disabled="disabled" :class="isPhone?'active':''" @click="judgeRegister">
							{{verification}}
						</button>
					</view> -->


					<view class="phone codeView">

						<input type="text" value="" v-model="code" maxlength="6"
							placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" @input="judgeRegister"
							name="code"  placeholder="请输入验证码" />
							<!-- :class="isPhone?'active':''" -->
						<view class="obtain" :disabled="disabled" @click="judgeRegister" >
							{{verification}}
						</view>
					</view>


					<view class="phone">
						
						<input type="text" value="" name="invitation" maxlength="8" placeholder="请输入邀请码"
							@input="invitationCode" placeholder-style="color:#cccccc; font-size:28rpx;" />
					</view>
					<view class="phone">
						<input type="text" password="true" name="password" value="" @input="onPass"
							placeholder="请输入登录密码" maxlength="11" placeholder-style="color:#cccccc; font-size:28rpx;" />
					</view>
				</view>
				<!-- 协议问题 -->
				<view class="agreement">
					<view class="whole">
						<view class="top" v-if="flag" @click="onFlag">
							<icon type="success" color="#069D4D" size="17"></icon>
						</view>
						<view v-else style="width: 35rpx;height: 35rpx;border-radius: 50%;
									border: #ccc solid 1rpx;"
							@click="onFlag"></view>
					</view>
					<view class="agree">
						我已阅读并同意<text @click="goToAgreement">《会员注册协议》</text>
					</view>
				</view>
				<view class="noAccount" @click="goToLogin">已有账号，<text>去登录</text></view>
			</view>
			
			<!-- 按钮 -->
			<view class="button">
				<button class="agree-register" @click="formSubmit()"
				:disabled="!phone||!code||!password||!flag||!invitation"
				>
					同意协议并注册
				</button>
				<!-- <button class="go-to-login" @click="goToLogin">
					去登录
				</button> -->
				<!-- <view class="go-to-login" @click="goToLogin">
					去登录
				</view> -->
			</view>
		</form>
	</view>
</template>

<script>
	import {
		appRegister,
		getVerfityCode
	} from "../../../api/login.js"
	export default {
		data() {
			return {
				// 头部导航
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '用户注册',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FF721B"],
					statusBarFontColor: '#1A1A1A',
				},
				phone: "", //手机号
				disabled: false, //按钮
				isPhone: false, //手机号正则
				password: "",
				code: "",
				invitation: "",
				time: 60, //倒计时
				verification: "获取验证码",
				List: [{
					id: '1',
					price: 100.00,
					name: "商品"
				}],
				active: null,
				flag: false,
				isGetPhone: false
			}
		},
		methods: {
			
			getPhone(e) {
				const that = this;
				wx.checkSession({
					success() {
						if (e.detail.errMsg == "getPhoneNumber:ok") {
							that.$http.post('/account/app/register', {
								mobile: that.phone
							}).then((res) => {
								if (res.code == 200) {
									that.phone = res.data.mobile
								}
							})
						}
					},
					fail() {
						// session_key 已经失效，需要重新执行登录流程
						that.$mUtil.toast('微信登录已过期', 2000);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 2500)
					}
				})

			},
			//跳转协议
			goToAgreement() {
				uni.navigateTo({
					url: "./agreement"
				})
			},
			//跳转到登录页
			goToLogin() {
				uni.redirectTo({
					url: "./login"
				})
				// let getOenId = uni.getStorageSync('openId')
				// console.log(getOenId)
			},
			//倒计时
			countDown() {
				var that = this
				if (that.time <= 0) {
					that.disabled = false;
					that.verification = "重新获取";
					that.isPhone = true;
					that.time = 60
					clearInterval(that.clear);
				} else {
					that.disabled = true;
					--that.time;
					that.verification = this.time + "s"+'秒后重发';
				}
			},

			//获取验证码
			judgeRegister() {
				if (this.isPhone) {
					this.$http.get("/account/verify-mobile/" + this.phone, ).then(res => {
						if (res && res.code == 200) {
							if (res.data == true) {
								this.$mUtil.toast("该手机号已被注册")
							} else if (res.data == false) {
								let res = this.$http.post(getVerfityCode, this.phone).then(res => {
									if (res && res.code == 200) {
										this.disabled = false;
										this.isPhone = false;
										this.verification = this.time + 's';
										this.clear = setInterval(this.countDown, 1000);
										this.$mUtil.toast("发送成功")
									} else {
										this.$mUtil.toast(res.msg)
									}
								})
							}
						}
					})
				}
			},
			obtainCode() {
				if (this.isPhone) {
					this.disabled = false;
					this.isPhone = false;
					this.verification = this.time + 's';
					this.clear = setInterval(this.countDown, 1000);
				}
			},
			beforeDestroy() {
				clearInterval(this.clear)
			},
			//邀请码
			invitationCode(e) {
				let invitationCode = e.detail.value
				this.invitation = invitationCode
			},
			// 手机号
			onPhone(e) {
				let onPhone = e.detail.value
				this.phone = onPhone
				if (onPhone.match(this.$mConfig.telRegex)) {
					if (this.verification == '获取验证码' || this.verification == '重新获取') {
						this.isPhone = true
					}
				} else {
					this.isPhone = false
				}
			},
			onPass(e) {
				let onPass = e.detail.value
				this.password = onPass
			},
			//同意并注册
			formSubmit(e) {

				if (!this.phone) {
					this.$mUtil.toast('请输入手机号')
					return false
				}
				if (!(this.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast('请输入正确手机号')
					return false
				}
				
				if (!this.code) {
					this.$mUtil.toast("请输入验证码")
					return false
				}
				if (!this.password) {
					this.$mUtil.toast("请输入登录密码")
					return false
				}
				if (!this.flag) {
					this.$mUtil.toast('请先同意协议')
					return false
				}

				let param = {
					mobile: this.phone,
					captcha: this.code,
					invitation_code: this.invitation,
					password: this.password
				}
				this.$http.post(appRegister, param)
					.then(res => {
						if (res.code == 200) {
							this.$mUtil.toast("注册成功")
							setTimeout(() => {
								uni.redirectTo({
									url: "./login"
								})
							}, 1000)
						}
					})

			},

			// 协议
			onFlag() {
				this.flag = !this.flag
			},
			radioChange(index) {
				if (this.active == index) {
					this.active == null;
				} else {
					this.active = index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contFrom {
		padding: 0 57rpx;
	}

	.button {
		margin: 70rpx 50rpx;

		.agree-register {
			width: 635rpx;
			height: 96rpx;
			background: #FF211F;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #FFFFFF;
			line-height: 31rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.go-to-login {
			color: #FF721B;
			font-size: 32rpx;
			font-weight: Regular;
			width: 100%;
			text-align: center;
			margin-top: 24rpx;
			border: 1rpx solid #FF721B;
			border-radius: 20rpx;
		}
	}

	.agree {
		font-size: 28rpx;
		color: #AAAAAA;
		font-weight: Regular;
		margin-left: 10rpx;

		text {
			font-weight: 400;
			color: #FF721B;
		}
	}

	.agreement {
		margin-top: 42rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		.whole {
			display: flex;
			align-items: center;
			width: 35rpx;
			height: 35rpx;
		}
	
		/deep/ .uni-icon-success {
			color: #FF211F !important;
		}
	}

	.password {
		display: flex;
		align-items: center;
		padding: 40rpx 0 40rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-right: 40rpx;
		}
	}

	.invitation {
		display: flex;
		align-items: center;
		padding: 40rpx 0 40rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			font-size: 28rpx;
			font-weight: Medium;
			color: #333333;
			margin-right: 40rpx;
		}
	}

	.verification {
		display: flex;
		flex-wrap: nowrap;
		padding: 40rpx 0 34rpx 0;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;

		.name {
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			font-weight: 500;
			margin-right: 40rpx;
		}

		.adjustment {
			flex: 1;
		}

		
		.active {
			background-color: #FF721B;
			color: #FFFFFF;
			border: none;
		}
	}
	.phone {

		width: 635rpx;
		height: 96rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 38rpx;
		box-sizing: border-box;

		// input {
		// 	width: 635rpx;
		// 	height: 96rpx;
		// }
	}
	.obtain {
		width: auto;
		height: 65rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #FF211F;
		font-weight: 400;
		font-size: 23rpx;
		color: #FF211F;
		line-height: 23rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 19rpx;
	}
	.codeView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 15rpx;
	}
	
	.agree {
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
		line-height: 27rpx;
		margin-left: 8rpx;
		text-align: center;
	
		text {
			color: #FF211F;
		}
	}
	.noAccount {
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
		margin-top: 42rpx;
		text-align: center;
	
		text {
			color: #FF211F;
		}
	}
	.top {
		display: flex;
		align-items: center;
	}
	
	.choice {
		margin: 0 50rpx;
		display: flex;
		align-items: center;
	
		.whole {
			display: flex;
			align-items: center;
		}
	}
	
</style>